import React, { Component } from 'react';
import {
	TouchableOpacity,
	TextInput,
	StyleSheet,
	View,
	Text,
	Dimensions,ScrollView
} from 'react-native';
import MapView, { Marker } from 'react-native-maps';

//https://snack.expo.io
export default class Message extends Component {
	constructor(props) {
		super(props);
		this.state = {
			
		};
	}

	render() {
		return (
			<ScrollView>
                      <View style={{padding:10,backgroundColor:'white',}} >
			<View style={styles.center}>
				<Text style={{fontSize:18,fontWeight:'600'}}>About Ripple Message</Text>
			</View>
			<View style={styles.mt1}>
				<Text>October 13, 2020 </Text>
			</View>
			
			<View style={styles.mt1}>
				<Text>Our application will use the Model-View-Presenter (MVP) architecture. Our front-end
framework, React (Native), wasn’t developed to fit in perfectly to any one architecture, and upon
further research, there is quite a lot of debate about what architecture React (Native) is a part of.
That being said, we chose MVP for two reasons. 1) Unlike MVC, where the Model directly
interacts with the view and the view interacts with the model, the presenter is the middle man.
This allows us to both make passive views (functional components in react) and also map onto
an HTTP request more accurately. When the presenter communicates with the model, it can
immediately receive a response with the current or updated state. 2) MVP allows us to
completely separate the model from the user interface. We are able to reuse the model with a new
UI if we decided in the future that we wanted to add a web app in addition to the planned mobile
application. Here is a diagram from class diagramming the MVP view.</Text>
			</View>
				</View>
            
            </ScrollView>
		);
	}
}

const styles = StyleSheet.create({
	mt1:{
		marginTop:10
	},
	mt:{
		marginTop:20
	},
	in_bg:{
		width:310,
		height:50,
		backgroundColor:'white',color:'red',padding:5
	},
	input:{
		width:300,
		// height:50
	},
	add_btn:{
		width:300,
		backgroundColor:'#1E90FF',
		padding:10,
		marginTop:30,
		color:'#FFFFFF',
		fontSize:20
		
	},
	centeredView: {
		flex: 1,
		justifyContent: "center",
		alignItems: "center",
		marginTop: 22
	},
	md: {
		width: 200,
		height: 500
	},
	btn: {
		backgroundColor: 'white',
		width: 300,
		height: 30,
		borderRadius: 5,
		fontSize: 18,
		fontWeight: '500'
	},
	center: {
		alignItems: 'center',
		justifyContent: 'center'

	}

})

